@import "mixins/mixins";
@import "common/var";
@import "input";
@import "popper";
@import "tag";
@import "cascader-panel";

@include b(cascader) {
    display: inline-block;
    position: relative;
    font-size: $--font-size-base;
    line-height: $--input-height;

    &:not(.is-disabled):hover {
        .el-input__inner {
            cursor: pointer;
            border-color: $--input-hover-border;
        }
    }

    .el-input {
        cursor: pointer;

        .el-input__inner {
            text-overflow: ellipsis;

            &:focus {
                border-color: $--input-focus-border;
            }
        }

        .el-icon-arrow-down {
            transition: transform .3s;
            font-size: 14px;

            @include when(reverse) {
                transform: rotateZ(180deg);
            }
        }

        .el-icon-circle-close:hover {
            color: $--input-clear-hover-color;
        }

        @include when(focus) {
            .el-input__inner {
                border-color: $--input-focus-border;
            }
        }
    }

    @include m(lg) {
        font-size: $--input-lg-font-size;
        line-height: $--input-lg-height;
    }

    @include m(sm) {
        font-size: $--input-sm-font-size;
        line-height: $--input-sm-height;
    }

    //@include m(mini) {
    //    font-size: $--input-mini-font-size;
    //    line-height: $--input-mini-height;
    //}

    @include when(disabled) {
        .el-cascader__label {
            z-index: #{$--index-normal + 1};
            color: $--disabled-color-base;
        }
    }

    @include e(dropdown) {
        //margin: 5px 0;
        font-size: $--cascader-menu-font-size;
        background: $--cascader-menu-fill;
        border: $--cascader-menu-border;
        border-radius: $--cascader-menu-radius;
        box-shadow: $--cascader-menu-shadow;
    }

    @include e(tags) {
        position: absolute;
        left: 0;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-wrap: wrap;
        line-height: normal;
        text-align: left;
        box-sizing: border-box;

        .el-tag {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            margin: 2px 0 2px 6px;
            text-overflow: ellipsis;
            background: $--cascader-tag-background;

            &:not(.is-hit) {
                border-color: transparent;
            }

            > span {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .el-icon-close {
                flex: none;
                background-color: $--color-text-placeholder;
                color: $white;

                &:hover {
                    background-color: $--color-text-secondary;
                }
            }
        }
    }

    @include e(suggestion-panel) {
        border-radius: $--cascader-menu-radius;
    }

    @include e(suggestion-list) {
        max-height: 204px;
        margin: 0;
        padding: 6px 0;
        font-size: $--font-size-base;
        color: $--cascader-menu-font-color;
        text-align: center;
    }

    @include e(suggestion-item) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 34px;
        padding: 0 15px;
        text-align: left;
        outline: none;
        cursor: pointer;

        &:hover, &:focus {
            background: $--cascader-node-background-hover;
        }

        &.is-checked {
            color: $--cascader-menu-selected-font-color;
            font-weight: bold;
        }

        > span {
            margin-right: 10px;
        }
    }

    @include e(empty-text) {
        margin: 10px 0;
        color: $--cascader-color-empty;
    }

    @include e(search-input) {
        flex: 1;
        height: 24px;
        min-width: 60px;
        margin: 2px 0 2px 15px;
        padding: 0;
        color: $--cascader-menu-font-color;
        border: none;
        outline: none;
        box-sizing: border-box;

        &::placeholder {
            color: $--color-text-placeholder;
        }
    }
}
